<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="redis" uri="http://www.shopjsp.com/redisTag/functions" %>
<c:set var="srcPath" value="${redis:getSysConfig('sysFileVisitRoot_back')}"/>
<c:set var="uploadPath" value="${redis:getSysConfig('uploadFileVisitRoot')}"/>
<c:set var="basePath" value="${redis:getSysConfig('base_path_back')}"/>
<script type="text/javascript">
	$addImageForm=null;
    $(document).ready(function() {
        $addImageForm=$("#addImageForm");
        if(form.length>0){ /**判断当前页面是否有填写表单并检验**/
            validateProductImageForm();
            /**Modal验证销毁重构**/
            $('#addOrEditModal').on('hidden.bs.modal', function() {
                reValidateForm();
            });
        }
    });
    /**
     * 自定义验证规则
     */
    function validateProductImageForm(){
        $addImageForm.bootstrapValidator({
            message: "无效的值",
            feedbackIcons: {
                valid: "glyphicon glyphicon-ok",
                invalid: "glyphicon glyphicon-remove",
                validating: "glyphicon glyphicon-refresh"
            },
            fields: {
                productImageInfo: {
                    validators: {
                        notEmpty: {message: "请上传图片"},
                        file:{maxSize: 1024*1024, message: '请上传一张最大不超过1M的jpg/png/gif图片文件'}
                    }
                },
                title: {
                    validators: {
                        notEmpty: {message: "请输入图片标题"}
                    }
                },
                orders: {
                    validators: {
                        notEmpty: {message: "请输入图片排序号"},
                        integer:{message: "请输入有效的整数"}
                    }
                }
            }
        });
    }

    /**
     * 重置表单验证
     */
    function reValidateProductImageForm(){
        $addImageForm.data('bootstrapValidator', null);
        validateProductImageForm();
    }

    /**
     * 提交文件上传表单
     */
    function submitImgForm(){
        /** 开启验证**/
        $addImageForm.data('bootstrapValidator').validate().validate();
        isValid=$addImageForm.data('bootstrapValidator').isValid();
        if(isValid){  /** 验证通过后提交表单**/
            /**生成上传后的列表信息**/
            createProductImgList($("#source").val(),index);
            var title=$("#title").val();
            var orders=$("#orders").val();
            $("#title"+index).val(title);
            $("#orders"+index).val(orders);
            $("#showTitle"+index).html(title);
            $("#showOrders"+index).html(orders);
            index++; /**提交确认后来控制计数器的增长*/
            $("#productImgClose").click();
        }else{ /** 验证失败了直接返回 **/
            return false;
        }
    }

    /**
     * 生成上传后的商品组图隐藏域
     */
    function createProductImgHidden(index){
        var trHtml = '<tr id="productImageTr_'+index+'"  class="productImages">';
        trHtml +='<input type="hidden" name="productImageList[' + index + '].productImageId" id="productImageId' + index + '" value=""/>';
        trHtml +='<input type="hidden" name="productImageList[' + index + '].productId" id="productId' + index + '" value=""/>';
        trHtml +='<input type="hidden" name="productImageList[' + index + '].source" id="source' + index + '" value=""/>';
        trHtml += '<input type="hidden" name="productImageList[' + index + '].large" id="large' + index + '" value="' + index + '"/>';
        trHtml += '<input type="hidden" name="productImageList[' + index + '].medium" id="medium' + index + '" value="' + index + '"/>';
        trHtml += '<input type="hidden" name="productImageList[' + index + '].thumbnail" id="thumbnail' + index + '" value="' + index + '"/>';
        /*trHtml += '</tr>';*/
        $("#productImageTable").append(trHtml);
    }
    /**
     * 生成上传后的商品组图列表信息
     */
    function createProductImgList(imgSource,index){
        var length=$("#noImgTr").length;
        if(length > 0){$("#noImgTr").remove();}
        var trHtml = '';
        trHtml += '<td class="tocenter_td">'+(index+1)+'</td>';
        trHtml += '<td class="tocenter_td">' +
            '<img style="width: 50px;height: 50px;" id="member-img' + index + '" src="${uploadPath}/'+imgSource+'" class="accountFigure"/></td>';
        trHtml += '<td class="tocenter_td">' +
            '<input type="hidden" name="productImageList[' + index + '].title" id="title' + index + '" class="form-control input-sm"/> ' +
			'<span id="showTitle' + index + '"></span></td> ';
        trHtml += '<td class="tocenter_td">' +
            '<input type="hidden" name="productImageList[' + index + '].orders" id="orders' + index + '" class="form-control input-sm"/> ' +
			'<span id="showOrders' + index + '"></span></td> ';
        trHtml += '<td class="tocenter_td"> ' +
            '<button id="btn_add_img" type="button" class="btn btn-default" onclick="deleteProductImageInfo('+index+')">' +
            '<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</button> </td> </tr>';
        $("#productImageTr_"+index).append(trHtml);
    }

    /**
     * 删除指定的组图图片信息
     */
    function deleteProductImageInfo(tr_index){
        showConfirm("你确定要删除吗?", function() {
            var productImageId_delete= $("#productImageId"+tr_index).val();
            if(productImageId_delete!="" && productImageId_delete!=null){//不为空说明是修改操作中原始库中存在的图片，需要删除数据库中的数据
                $.ajax({
                    type: "POST",
                    dataType: "JSON",
                    url: "${basePath}/back/shopProduct/deleteProductImageByProductImageId.sjson",
                    async: false,
                    data: {productImageId: productImageId_delete},
                    success: function (data) {
                        if(!data.success){
                            return  false;
                        }
                    }
                });
            }
            $("#productImageTr_"+tr_index).remove();
            var length=$(".productImages").length;
            if(length==0){/**无图片信息**/
            var trHtml = '<tr id="noImgTr"><td  class="tocenter_td" colspan="5">没有组图信息，请点击左上角“添加图片”</td></tr>';
                $("#noImgTr").remove();
                $("#productImageTable").append(trHtml);
                index=0;/**无图片信息时将计数器设置为0**/
            }
        });
	}

    /**
     * bootstrap  fileinput 文件上传  点击“添加”调用
     * uploadIndex：页面文件的顺序位置
     * subSysFolderName：子系统目录
     * imageInfoPath：文件上传的存储目录
     * maxFileCount：最多上传文件数量
     * maxImageWidth：上传图片的最大宽度
     * maxImageHeight：上传图片的最大高度
     *
     */

    function  initImageForProductAdd(uploadIndex,subSysFolderName,imageInfoPath,maxFileCount,maxImageWidth,maxImageHeight){
        $(".container").css("padding","0px 0px 0px 0px").css("width","auto");
        $(".file-drop-zone").css("height","100px");
        $("#fileWrap"+uploadIndex).empty().html("<input id='file_"+uploadIndex+"'  class='file input-group input-group-sm'  name='productImageInfo' type='file' >");
        $("#file_"+uploadIndex).fileinput({
            language:'zh',  /**默认中文**/
            dropZoneEnabled:false,  /**是否显示拖拽区域**/
            showUpload: false,  /**是否显示批量上传**/
            uploadAsync:true,  /**默认异步上传**/
            showRemove : false, /**显示移除按钮**/
            showPreview : true, /**是否显示预览**/
            showCaption: true,  /**是否显示标题**/
            browseClass: "btn btn-primary",  /**按钮样式**/
            autoReplace: true, /**自动替换**/
            maxFileCount: maxFileCount,  /**表示允许同时上传的最大文件个数**/
            maxFileSize: 2048,  /**单位为kb，文件大小为2M，如果为0表示不限制文件大小**/
            maxImageWidth: maxImageWidth,  /**图片的最大宽度**/
            maxImageHeight: maxImageHeight,  /**图片的最大高度**/
            enctype: 'multipart/form-data',
            validateInitialCount:true,
			uploadUrl: '${basePath}/back/shopProduct/uploadProductImage.sjson?subSysFolderName='+subSysFolderName+'&imageInfoPath='+imageInfoPath,  /**上传的地址(访问接口地址)image_phoneCategory**/
            allowedFileExtensions: ['jpg', 'png', 'gif'],  /**接收的文件后缀**/
            overwriteInitial: false
        }).on("filebatchselected", function(event, files) { /**已经选择文件未上传回调的事件**/
            /**隐藏整体的上传文件进度条**/
            $(".kv-upload-progress").hide();
            /**隐藏上传文件右上角的 x **/
            $(".fileinput-remove").hide();
            /**自动上传图片**/
            $(this).fileinput("upload");
        }).on("fileuploaded", function(event, data) { /**文件上传成功回调的事件**/
            if(data.response){
                var isSuccess = JSON.parse(data.response.success);
                if(isSuccess){
                    /**从respone中获取resultMsg对象**/
                    var productImage = JSON.parse(data.response.data);
                    /** 生成上传后的商品组图隐藏域**/
                    createProductImgHidden(index);
                    /**将重新上传的图片回写到隐藏域中**/
                    $("#source").val(productImage.source);
                    $("#source"+index).val(productImage.source);
                    $("#large"+index).val(productImage.large);
                    $("#medium"+index).val(productImage.medium);
                    $("#thumbnail"+index).val(productImage.thumbnail);
                }else{
                    /**上传失败后，动态添加上传检验并验证失败**/
                    var message = JSON.parse(data.response.msg);
                    showMsg(message);
                }
            }
        }).on('fileimagesloaded', function(event) {
            $("#file_"+uploadIndex).hide();
        }).on("filesuccessremove", function(event, data) { /**移除已上传的文件完成回调的事件**/
        	$("#file_"+uploadIndex).show();
            $("#source").val("");
            /**移除上传文件后，动态添加上传检验并验证失败**/
            $addImageForm.bootstrapValidator('enableFieldValidators', 'productImageInfo', true);
            $addImageForm.bootstrapValidator('revalidateField', 'productImageInfo');
        }).on("fileremoved", function(event, data) { /**移除已上传的文件完成回调的事件**/
        	$("#file_"+uploadIndex).show();
            /**删除原始文件后将隐藏域置空**/
            $addImageForm.bootstrapValidator('enableFieldValidators', 'productImageInfo', true);
            $addImageForm.bootstrapValidator('revalidateField', 'productImageInfo');
        });
        reValidateProductImageForm();
    }
</script>



<!--添加编辑模态框（Modal） -->
<div class="modal fade" id="addImgModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
	<div class="modal-dialog" style="width:70%">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" id="productImgClose" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h5 class="modal-title" id="myModalLabel">上传商品组图</h5>
			</div>
			<div class="modal-body">
				<form id="addImageForm">
					<table  class="addOrEditTable table-bordered table" style="width:100%;">
						<tr>
							<th class="tocenter_th">上传图片</th>
							<td>
								<div class="form-group">
									<div class="container">
										<input type="hidden" id="source" value=""/>
										<div class="form-group" id="fileWrap2"></div>
									</div>
									<span style="color:red;padding-top:5px;">提示：请上传规格宽1000px，高1000px的图片</span>
								</div>
							</td>
						</tr>
						<tr>
							<th class="tocenter_th">标题</th>
							<td>
								<div class="form-group">
									<input type="text" class="form-control input-sm" id="title" name="title" placeholder="请输入图片标题"/>
								</div>
							</td>
						</tr>
						<tr>
							<th class="tocenter_th">排序号</th>
							<td>
								<div class="form-group">
									<input type="text" class="form-control input-sm" id="orders" name="orders" placeholder="请输入排序值"/>
								</div>
							</td>
						</tr>
					</table>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" id="saveImgBtn" class="btn btn-primary"  onclick="submitImgForm()">确定上传</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>